<template>


    <div class="container">
        <h3>注册</h3>
        <form>
            用户名：<input type="text" v-model="myForm.username" /><br>
            密码：<input type="password" v-model="myForm.password" /><br>
            确认密码：<input type="password" v-model="myForm.beginpassword" /><br>
            性别：<input type="radio" v-model="myForm.sex" value="0" />男
            <input type="radio" v-model="myForm.sex" value="1" />女<br>
            爱好：<input type="checkbox" v-model="myForm.like" value="0" />读书
            <input type="checkbox" v-model="myForm.like" value="1" />体育
            <input type="checkbox" v-model="myForm.like" value="2" />旅游<br>
            国籍：<select v-model="myForm.nationality">
                <option value="0">中国</option>
                <option value="1">美国</option>
                <option value="2">英国</option>
            </select><br>
            个人简介：<textarea v-model="myForm.brief" rows="5" cols="30"></textarea><br>
            <input type="button" value="提交" @click="handler" />
        </form>

    </div>

</template>

<script setup lang="ts" name='Hero'>
import { ref } from 'vue';

let myForm = ref({
    username: '',
    password: '',
    beginpassword: '',
    sex: 0,
    like: ['0', '1', '2'],
    nationality: 0,
    brief: ''
})



function handler() {
    console.log("获取表单数据 ，发送到 后端的接口，  保存到数据库");

    console.log("  myForm.value = ", myForm.value);

}

</script>

<style scoped>
.container {

    width: 100%;
    min-height: 80px;
    /* line-height: 80px; */
    margin: 10px;
    background-color: cadetblue;


}
</style>